<template>
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <input type="text" placeholder="意式风情火腿礼盒" />
    </div>
    <!-- 六大分类 -->
    <mt-navbar v-model="active" @click="count">  
      <mt-tab-item :id="item.sid+''" v-for="(item) in cats" :key="item.sid">
        {{item.sname}}
        <img slot="icon" :src="`${item.s_pic}.jpg`"/>
      </mt-tab-item>
    </mt-navbar>
    <!-- 小类 -->
      <div class="content">
        <div class="zb" v-if="datas">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="(items, index) in datas"
            :key="index" :title="`${items.fname}`"/>
          </van-sidebar>
        </div>
        <!-- 商品内容 -->
        <div class="yb" v-if="shops">
          <div v-for="(it, index) in shops" :key="index">
            <router-link :to="`/details?cid=${it.cid}`" class="sp">
            <div>
              <img :src="`${it.c_pic}.jpg`"/></div>
            <div class="bt">
              <h6>{{ it.c_name }}</h6>
              <p>{{ it.c_title }}</p>
              <div class="jg">
                <p>￥{{ it.c_price }}</p>
                <img src="@/assets/shopcar2.png" alt="" />
              </div>
            </div>
            </router-link>
          </div>
        </div>
      </div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="shoye" @click.native.capture="getshoye"
        >首页
        <img
          v-if="selected == 'shoye'"
          slot="icon"
          src="../assets/shoye2.png"
        />
        <img v-else slot="icon" src="../assets/shoye1.png" />
      </mt-tab-item>
      <mt-tab-item id="fenlei"
        >分类
        <img
          v-if="selected == 'fenlei'"
          slot="icon"
          src="../assets/fenlei2.png"
        />
        <img v-else slot="icon" src="../assets/fenlei1.png" />
      </mt-tab-item>
      <mt-tab-item id="shopcar" @click.native.capture="getto"
        >购物车
        <img
          v-if="selected == 'shopcar'"
          slot="icon"
          src="../assets/shopcar2.png" />
        <img v-else slot="icon" src="../assets/shopcar1.png"
      /></mt-tab-item>
      <mt-tab-item id="me" @click.native.capture="getme"
        >我的
        <img v-if="selected == 'me'" slot="icon" src="../assets/me2.png" />
        <img v-else slot="icon" src="../assets/me1.png" />
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: '1',
      activeKey: 0,
      selected: "fenlei",
      cats: [], //大分类数据
      datas: [], //小分类数据
      shops: [], //小分类详情
    };
  },
  mounted() {
    this.invtall();//初始化导航栏 
      this.axios.get(`/shop/family?sid=${this.active}`).then(res=>{
        console.log(res);
        this.datas=[]
        this.shops=[]
         this.datas=res.data.result
        this.shops=res.data.data
      }  
      )  
     
  },
  methods: {
    getto() {
      this.$router.push("/myshopcar");
    },
    getshoye() {
      this.$router.push("/");
    },
    getme() {
      this.$router.push("/mymessage");
    }, 
    invtall(){
      this.axios.get('/shop/sam').then(res=>{
        this.cats=res.data.data
        console.log(res);
      })
    },
    count(){
      this.active++
    }
    // getactive(){
    //   let sid=this.active
    //   console.log(sid);
    //   this.axios.get(`/shop/family?sid=${sid}`).then(res=>{
    //     console.log(res);
    //      this.datas=res.data.result
    //     this.shops=res.data.data
    //   }  
    //   ) 
    // }
  },
};
</script>
<style scoped>
.search {
  margin-left: 3px;
}
.search input {
  width: 95%;
  height: 20px;
  margin-top: 10px;
  margin-left: 8px;
  border-radius: 3px;
}
.content {
  width: 100%;
  height: 495px;
  clear: both;
  display: flex;
  margin-top: 10px;
}
.content .yb {
  display: block;
  float: right;
  clear: both;
  width: 80%;
  height: 495px;
  overflow-x: hidden;
  overflow-y: auto;
}
.sp img {
  width: 70px;
  height: 60px;
  margin-right: 5px;
  margin-bottom: 2px;
}
.sp {
  width: 100%;
  display: flex;
  position: relative;
  padding-top: 5px;
  border-bottom: 1px solid rgb(184, 184, 184);
}
.sp h6 {
  font-size: 14px;
  word-break: break-all;
  margin-bottom: 2px;
  padding: 2px;
  margin-right: 10px;
  color: rgb(31, 30, 30);
}
.sp p {
  width: 100%;
  font-size: 12px;
  margin-bottom: 4px;
}
.sp .bt {
  width: 75%;
  overflow: hidden;
}
.sp .bt p {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.sp .jg {
  width: 100%;
  display: flex;
}
.sp .jg p {
  color: red;
  margin-top: 3px;
  font-size: 14px;
  word-break: break-all;
}
.sp .jg img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.van-sidebar-item {
  font-size: 12px;
  border: 0px;
  text-align: center;
}
.van-sidebar {
  width: 80px;
  background-color: #f7f8fa;
  overflow-y: auto;
}
.content .zb {
  width: 20%;
  background-color: #f7f8fa;
}
</style>
